<template>
  <div>
    <van-button type="primary" @click="handleNum1">{{ num1 }}</van-button>
    <van-button type="warning" @click="handleNum2">{{ num2 }}</van-button>
    <div @click="handleUser">
      姓名:{{ user.name }} 年龄:{{ user.age }}
    </div>
    <h1 @click="msg='走你'">{{ msg }}</h1>
    <h2>{{ reMsg }}</h2>
  </div>
</template>

<script setup>

import { ref,reactive, computed, watch, onMounted } from 'vue';

// 组合式API空间
// 目标：使用新组合式语法，替代所有的选项式语法
// 1. 替代data
let num1 = 10  //普通数据
const num2 = ref(10)  //响应式数据 , 可以用于所有数据
const user = reactive({name:'三丰',age:10}) //响应式数据，针对键值对数据

// 2. 替代methods
const handleNum1 = ()=>{
  num1++
  console.log(num1);
}
const handleNum2 = ()=>{
  num2.value++
}
const handleUser = ()=>{
  user.age++
}

// 3. computed计算属性
const msg = ref('Hello')
const reMsg = computed(()=>{
  return msg.value.split('').reverse().join('')
})

// 4. watch监听
watch(msg,()=>{
  console.log('检测到了msg的变化');
})

// 5. 生命周期函数，不需要created生命周期
console.log('setup环境本身可以替代created');
onMounted(()=>{
  console.log('页面已经完成首屏渲染');
})

// 6. 使用组合式API完成菜单切换功能

</script>

<style lang="scss" scoped>

</style>